import React, {Component} from 'react'
import { Input, Button, Table, Icon, Form, DatePicker, Select } from 'antd'

const Search =　Input.Search
const FormItem = Form.Item
const Option = Select.Option

class CommunicateRecord extends Component {
  constructor() {
    super()
    this.state = {
      onOff: true,
    }
    this.directorChange = this.directorChange.bind(this)
    this.onChangeOff = this.onChangeOff.bind(this)
  }
  directorChange(value) {
    console.log(`selected ${value}`);
  }
  onChangeOff(bool) {
    const children = []
    for (let i = 10; i < 36; i++) {
      children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>)
    }
    const { getFieldDecorator } = this.props.form
    const { inputVisible, inputValue, tags } = this.state
    const columns = [{
      title: '时间',
      dataIndex: 'time',
    }, {
      title: '内容',
      dataIndex: 'content',
    }, {
      title: '负责人',
      dataIndex: 'status',
    }]
    const data = []
    for (let i = 0; i < 20; i++) {
      data.push({
        key: i,
        time: '135****8888',
        content: 'London, Park Lane no,London, Park Lane no',
        status: i,
      })
    }
    let result
    if(!bool) {
      result = (
        <div>
          <div className="rt-stu-order">
            <Form inline className="rt-communicate-content">
              <FormItem
                label="内容"
              >
                {getFieldDecorator('textarea')(
                  <Input type="textarea" rows={4} />
                )}
              </FormItem>
            </Form>
            <Form inline className="rt-form-new">
              <FormItem
                label="负责人"
              >
                {getFieldDecorator('director')(
                  <Select
                    tags
                    style={{ width: '100%' }}
                    className="rt-select-tag"
                    onChange={this.directorChange}
                    tokenSeparators={[',']}
                  >
                    {children}
                  </Select>
                )}
              </FormItem>
              <FormItem
                label="下次沟通"
              >
                {getFieldDecorator('nextDate')(
                  <DatePicker placeholder="请选择日期"/>
                )}
              </FormItem>
            </Form>
          </div>
          <div className="cl rt-modal-foot">
            <Button
              className="lf rt-btn-update"
              onClick={
                () => {
                  this.setState({
                    onOff: true,
                  })
                }
              }
            >
              添加
            </Button>
            <Button
              className="rf rt-btn-del"
              onClick={
                () => {
                  this.setState({
                    onOff: true,
                  })
                }
              }
            >
              放弃
            </Button>
          </div>
        </div>
        )
      return result
    }
    result = (
      <div className="rt-stu-order">
        <div className="cl rt-order-out">
          <Search className="rt-intent-seach lf" placeholder="输入关键字" onSearch={(value) => {console.log(value)}} />
          <Button className="rt-btn-search">搜索</Button>
          <Button
            className="rt-btn-orange rf"
            icon="addfile"
            onClick={
              () => {
                this.setState({
                  onOff: false,
                })
              }
            }
          >
            新建记录
          </Button>
        </div>
        <Table className="rt-itent-table rt-order-table" columns={columns} dataSource={data} />
      </div>
      )
    return result
  }

  render() {
    const { onOff } = this.state
    return this.onChangeOff(onOff)
  }
}

export default Form.create()(CommunicateRecord)